@import "../pulic/style.less";

body{
  &.back-green{
    .page-header,.astock_zt{
      background-color: @green-color;
    }

  }
  &.back-red{
    .page-header,.astock_zt{
      background-color: @head-market-backredcolor;
    }
  }
}
.page-header{
  .right{
    color: #A3ACC4;
  }
  .matket-header{
    text-align: center;
    color: #fff;
  }
  &.market-header{
    background-color:@head-market-backredcolor ;
  }

}

.astock_zt{
  font-size: 0;
  padding-top: 0.05rem;
  padding-left: 0.12rem;
  padding-right: 0.12rem;
  padding-bottom: 0.05rem;
  border-bottom: 1px solid @border-color;
  background-color:@head-market-backredcolor ;
  color: #fff;
  display: flex;
  justify-content: space-between;

  >div {

    font-size: @font14;
    display: inline-block;
    vertical-align: middle;

    &:first-child{
      margin-right: 0.1rem;
      flex: 1;
    }
    .mtop-1{
      font-size: 0.3rem;
      line-height: 0.44rem;
    }
    .time{
      line-height: 0.4rem;
      color: #fff;
      padding-left: 0.15rem;
      border-left: 1px solid @border-color;
    }
  }

}
.market-div>div{
  //background-color: @user-background;
}
//.red{
//  color:@red-color
//}
//.green{
//  color: @green-color;
//}
.market-detail{
  padding: 0.1rem 0;

  flex: 2;
  .market-flex {
    display: flex;
    font-size: 0;

    margin-bottom: 0.075rem;
    div {
      font-size: 0.12rem;
      flex: 1;
    }
  }
}

.market-v {
  background-color: @market-div-backcolor;
}
.deal-select{
  background: @market-div-backcolor;
  margin-top: 0.1rem;
  padding: 0.1rem 0.12rem;
  .hint{
    font-size: @font14;
    display: flex;
    justify-content:space-between;
    margin-bottom: 0.1rem;
    line-height: 0.2rem;
    span:last-child{
      color:@market-color-greay;
      font-size: @font12;
    }
    i{
      color: @market-color-origin;
    }
  }
  .money-select{
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
    span{
      width: 30%;
      text-align: center;
      line-height: 0.3rem;
      margin-bottom: 0.1rem;
      border: @market-money-border;
      border-radius: 0.03rem;
      &.free{
        background: url("/images/market/mian.png") no-repeat;
        background-size: 0.4rem 0.30rem;
        background-position-x: 110%;
        background-position-y: -0.05rem;
      }
      &.optional{
        border: @market-money-border-active;
        color:@txt-blur-color;
      }
      &.disable{
        border:none;
        background-color:@market-no-active-back;
        color:@market-color-greay;
      }
    }
  }
}

  .five_5 {
    width: 32%;
    float: right;

    font-size: 0;
    padding: 0.06rem 0 0.1rem;
    div {
      display: inline-block;
      width: 50%;
      flex: 1;
      font-size: 0.14rem;
    }
    #sell,#buy {
      padding-right: 0.1rem;
    }

    li {
      margin-bottom: 0.05rem;
      display: flex;
      font-size: 0;
      line-height: 0.17rem;
      span {
        display: inline-block;
        flex: 1;
        width: 33.33%;
        font-size: 0.14rem;
        &:first-child{
          color: @revoke-color-gray1;
        }
        &:last-child{
          text-align: right ;
          //color:#fff;
        }
      }
      .green{
        color: @green-color;
      }
      .red{
        color: @red-color;
      }
    }
  }


.news_cavas{
  height: 2.6rem;
  color:@revoke-color-gray1;
}
#stock-canvas{
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 0.2rem;
  zoom: 0.426667;
  #header {
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    position: relative;
    display: none;
    #name {
      width: 145px;
      float: left;
      text-indent: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    #current-price {
      width: 155px;
      float: left;
    }
    #current-bargain {
      width: 130px;
      float: left;
    }
    #current-time {
      width: 155px;
      float: left;
    }
    ul {
      position: absolute;
      left: 0px;
      right: 40px;
      background: #fff;
      z-index: 2;
      top: 0px;
      height: 100%;
      display: none;
    }
    #close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 24px;
      height: 24px;
      line-height: normal;
      display: none;
    }
  }

  #nav {
    height: .35rem;
    line-height: 0.35rem;
    clear: both;
    padding: 0 4%;
    border-bottom: 1px solid @border-color;
    ul {
      width: 100%;
      display: flex;
      li {
        width: 100%;
        text-align: center;
        float: left;
        cursor: pointer;
        color: #818181;
        font-size: @font16;
        &.current {
          color: @red-color;
        }
      }
    }
  }
  .item {
    position: absolute;
    top: 0.35rem;
    left: 0px;
    width: 100%;
    bottom: 0px;
    font-size: 0.14rem;
    z-index: 2;
    .touch {
      position: absolute;
      width: 99%;
      top: 10px;
      bottom: 10px;
      height: 2.25rem;
      overflow: hidden;
      &#touch-mins{
        height:2.75rem;
      }
      &#touch-minute {
        height: 2.25rem;
      }
      &#touch-mins, &#touch-minute {
        width: 65%;
      }
    }
    .K-line {
      left: 0px;
      top: 0px;
      width: 99.8%;
      position: absolute;
      .price {
        position: absolute;
        left: 5px;
        height: 100%;
        z-index: 3;
        width: 0.45rem;
        li {
          position: absolute;
          left: 0px;
          height: 16px;
          line-height: 16px;
          margin-top: -8px;
         }
      }
      .range {
        position: absolute;
        right: 5px;
        width: 0.65rem;
        height: 100%;
        z-index: 3;
        li {
          position: absolute;
          width: 100%;
          left: 0px;
          height: 16px;
          line-height: 16px;
          text-align: right;
          margin-top: -8px;
        }
      }
      .k {
        position: absolute;
        width: 99%;

        top: 0px;
        z-index: 1;
        &.mins-k{
          height:2.75rem;
        }
        &#minute-k {
          height: 1.75rem;
        }
      }
    }
     #dot{
        z-index: 4;
        opacity: 0.4;
        background: #00BCD4;
        border-radius: 10px;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        margin-top: 5px;
        position: absolute;
        left: -1000px;
        top: 0px;
     }
    .KL-time {
      position: absolute;
      width: 98%;
      top: 1.75rem;
      height: 20px;
      line-height: 20px;
      li{
        position: absolute;
        top: 0px;
        &.two {
          width: 100%;
          text-align: center;
          left: 0;
        }
        &.three {
          right: 0;
        }
      }
    }
    .L-line {
      position: absolute;
      width: 99%;
      bottom: 5px;
      left: 0px;
      .volume {
        position: absolute;
        width: 100%;
        left: 0px;
        top: 0px;
        height: 100%;
        z-index: 3;
        text-align: right;
      }
      .l {
        width: 100%;
        height: 0.35rem;
        left: 0px;
        top: 0px;
      }
      &#minute-l, &#dayK-l {

      }
    }
    #touch-mins .L-line{
      display: none;
    }
    &.item-k{
      .avg {
        position: absolute;
        width: 100%;
        top: 2px;
        li {
          float: left;
          margin-left: 10px;
        }
      }
      .MACD ,.KDJ, #ktool {
        display: none;
      }
      .price {
        right: 10px;
        width: 0.45rem;
        left: auto;
      }
    }
    #touch-dayK {
      width: 100%;
      height: 2.25rem;
    }
  }
}

#loading {
  background: url(../../../images/home/loading.gif) no-repeat center center;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 15%;
  z-index: 100;
}
#net-layout, #net-error {
  position: absolute;
  width: 100px;
  height: 30px;
  z-index: 99;
  display: none;
  left: 50%;
  bottom: 20px;
  margin-left: -50px;
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
#net-error {
  z-index: 100;
}
#error span{
  display: block;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
#net-layout {
  background: #3d3d3d;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.astock-market-btn{
  display:flex;
  position: fixed;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  background: @body-background;
  div{
    flex: 1;
    padding-top:0.05rem;
    padding-bottom: 0.05rem;
    &.buy-btn{
      padding-left: 0.12rem;
      padding-right: 0.12rem;
    }
    button{
      width: 100%;
      color:#fff;
      line-height: 0.45rem;
      font-size: @font18;
      &.more{
        .buy-red-btn()
      }


    }
  }

}

.zoom{
  display: none;
}
.future-market-btn{
  height:0.44rem;
  line-height: 0.44rem;
  display: flex;
  position: fixed;
  bottom: 0;
  left:0;
  right: 0;
  div{
    flex: 1;
    width: 33.333%;
    button{
      display: block;
      width: 100%;
      height:0.44rem;
      color: #fff;
      font-size: @font16;
      &.condition-btn{
        background: #020314;
      }
      &.more-btn{
        background: #D51C53;
      }
      &.empty-btn{
        background: #0DB981;
      }
      &.close-btn{
        background: #1065DC;
      }
    }
  }
}

.freeList{
  border-top: 1px solid @border-color;
  div{
    line-height: 0.4rem;
    height:0.4rem;
    border-bottom: 1px solid @border-color;
    .red{
      color: @red-color;
    }
  }
}